<template>
  <el-button
    type="default"
    @click="handleClick"
    :class="['h-16 justify-start border', buttonColor, 'transition-all hover:shadow-md']"
  >
    <Icon :icon="icon" class="mr-2" :size="18" />
    {{ title }}
  </el-button>
</template>

<script lang="ts">
export default {
  name: 'QuickActionButton',
  props: {
    title: {
      type: String,
      required: true
    },
    icon: {
      type: String,
      required: true
    },
    route: {
      type: String,
      required: true
    },
    permission: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: 'primary'
    }
  },
  methods: {
    handleClick() {
      this.$router.push(this.route)
    }
  },
  computed: {
    buttonColor() {
      const colors: Record<string, string> = {
        primary: '!bg-primary/10 !text-primary !border-primary/20 hover:!bg-primary/20',
        success: '!bg-success/10 !text-success !border-success/20 hover:!bg-success/20',
        warning: '!bg-warning/10 !text-warning !border-warning/20 hover:!bg-warning/20',
        info: '!bg-info/10 !text-info !border-info/20 hover:!bg-info/20'
      }
      return colors[this.color] || ''
    }
  }
}
</script>
